<template>
    <div class="home">
        <div class="search-container">
            <el-form :inline="true" :model="queryParams" size="mini" class="demo-form-inline">
                <el-form-item label="物品名称">
                    <el-input v-model="queryParams.name" placeholder="物品名称"></el-input>
                </el-form-item>
                <el-form-item label="时间范围">
                    <el-date-picker
                            v-model="queryParams.timeRange"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button @click="handleNewItem"
                               size="mini"
                               type="success">物品录入
                    </el-button>
                </el-form-item>
            </el-form>
        </div>

        <div style="padding:20px;" class="table-content">
            <el-table :data="tableData"
                      stripe
                      highlight-current-row
                      style="width: 100%">
                <el-table-column :label="item.label" :prop="item.prop" v-for="item in tableLabel">
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleDelete(scope.row)" type="danger" size="mini"
                                   icon="el-icon-delete" circle>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>

        <el-drawer title="数据录入"
                   :visible.sync="show"
                   direction="ltr">
            <div style="padding: 20px;">
                <el-form ref="form"
                         size="mini"
                         :model="form"
                         label-width="120px">

                    <el-form-item label="名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>

                    <el-form-item label="分类">
                        <el-radio-group v-model="form.sort">
                            <el-radio-button :label="1">舰船</el-radio-button>
                            <el-radio-button :label="2">武器</el-radio-button>
                            <el-radio-button :label="3">弹药</el-radio-button>
                            <el-radio-button :label="4">装置</el-radio-button>
                            <el-radio-button :label="5">组件</el-radio-button>
                            <el-radio-button :label="6">其他</el-radio-button>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="型号">
                        <el-radio-group v-model="form.type">
                            <el-radio-button label="S"></el-radio-button>
                            <el-radio-button label="M"></el-radio-button>
                            <el-radio-button label="L"></el-radio-button>
                            <el-radio-button label="U"></el-radio-button>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="success"
                                   @click="onSubmit">录入
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>

    </div>
</template>

<script>
  import localforage from 'localforage'
  import { pickerOptions } from '../util/config'

  const tableLabel = [
    { label: '物品名称', prop: 'name' },
    { label: '物品分类', prop: 'sortName' },
    { label: '型号', prop: 'type' },
  ]

  export default {
    name: 'goodsInput',
    created() {
      this.initDB()
      this.getGoodsList()
    },
    data() {
      return {
        tableLabel,
        show: false,
        queryParams: {
          name: '',
        },
        pickerOptions, // 时间选择器快捷选项
        tableData: [],
        form: {
          name: '',// 物品名称
          sort: 1, // 物品分类 1舰船 2武器 3弹药 4装置 5组件 6其他
          type: 'S', // 型号大小 u x m l
        },
      }
    },
    methods: {
      initDB() {
        this.db = localforage.createInstance({
          storeName: "goodsNames" // 获取表
        })
      },

      async getGoodsList() {
        let tmp = []
        this.db.iterate((value, key, iterationNumber) => {
          // 此回调函数将对所有 key/value 键值对运行
          tmp.push(value)
        }).then(() => {
          this.tableData = tmp
        }).catch(function (err) {
          console.log(err);
        });
      },

      handleNewItem() {
        this.resetForm()
        this.show = true
      },
      // 立即创建
      async onSubmit() {
        const sorts = ['', '舰船','武器', '弹药', '装置', '组件', '其他']
        this.form.key = this.form.name
        this.form.sortName = sorts[this.form.sort]
        await this.db.setItem(this.form.name, this.form)
        this.getGoodsList()
      },
      handleDelete(row) {
        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await this.db.removeItem(row.name)
          this.getGoodsList()
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 1500
          })
        })
      },
      saveTableData() {
        this.index = null
        window.localStorage.prices = JSON.stringify(this.tableData)
      },
      resetForm() {
        this.form = {
          name: '',// 物品名称
          sort: 1, // 物品分类 1舰船 2武器 3弹药 4装置 5组件 6其他
          type: 'S', // 型号大小 u x m l
        }
      },
      handleMockData() {
        this.form = {
          name: 'test',// 物品名称
          level: 1,// 品级
          tLevel: 1,// 科技等级
        }
      },
    }
  }
</script>
